import 'package:flutter/material.dart';
import 'dart:ui' as ui show ImageFilter;

/// 展开动画
class DropDownAnimationPage extends StatefulWidget {
  DropDownAnimationPage({Key? key}) : super(key: key);

  @override
  _DropDownAnimationPageState createState() => _DropDownAnimationPageState();
}

class _DropDownAnimationPageState extends State<DropDownAnimationPage>
    with TickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<Rect?> _animation;

  late AnimationController _fadeController;
  late Animation<double> _fadeAnimation;

  @override
  void initState() {
    _animationController = AnimationController(
        duration: Duration(milliseconds: 3000), vsync: this);

    _fadeController = AnimationController(vsync: this);
    _fadeAnimation = Tween(
      begin: 0.0,
      end: 1.0,
    ).animate(_fadeController);

    _animation = RectTween(
      begin: Rect.fromLTRB(0.0, -300, 0.0, 0.0),
      end: Rect.fromLTRB(0.0, 0.0, 0.0, 0.0),
    ).animate(_animationController);

    //开始动画
    // _animationController.forward();
    _animationController.animateTo(1.0, curve: Curves.fastOutSlowIn);
    _fadeController.animateTo(
      1.0,
      duration: Duration(milliseconds: 300),
      curve: Curves.fastOutSlowIn,
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("顶部展开,使用Stack展开动画"),
        centerTitle: true,
        actions: [
          IconButton(
            icon: Icon(Icons.keyboard_arrow_down),
            onPressed: () {
              _animationController.animateTo(
                1.0,
                duration: Duration(milliseconds: 300),
                curve: Curves.fastOutSlowIn,
              );
              _fadeController.animateTo(
                1.0,
                duration: Duration(milliseconds: 300),
                curve: Curves.fastOutSlowIn,
              );
            },
          ),
        ],
      ),
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Center(
            child: Text("测试"),
          ),
          FadeTransition(
            opacity: _fadeAnimation,
            child: GestureDetector(
              onTap: () {
                _animationController.animateTo(
                  0.0,
                  duration: Duration(milliseconds: 150),
                  curve: Curves.fastOutSlowIn,
                );
                _fadeController.animateTo(
                  0.0,
                  duration: Duration(milliseconds: 150),
                  curve: Curves.fastOutSlowIn,
                );
              },
              child: BackdropFilter(
                filter: ui.ImageFilter.blur(
                  sigmaY: 3.0,
                  sigmaX: 3.0,
                ),
                child: Container(color: Colors.black26),
              ),
            ),
          ),
          RelativePositionedTransition(
            rect: _animation,
            size: Size(0.0, 0.0),
            child: Align(
              alignment: Alignment.topCenter,
              child: Container(
                height: 300.0,
                color: Colors.red,
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
}
